<template>
     <div>
          <bfe-container class="bfeContainer">
               <bfe-container>
                    <div ref="scrollBox" id="Scroll" style="overflow-y:auto;width: 100%">
                         <bfe-main class="box-detail" style="width:100%;">
                              <div class="item">
                                  
                            <TransTitle title="调查信息" ref="anchor_0" />
                                  
                            <BaseInfo ref="baseInfo" :formObj.async="formObj" :disabled="true"
                                :surveyScopeCode="surveyScopeCode" />
                                 
                        </div>
                              <div class="item">
                                  
                            <TransTitle title="接收情况" ref="anchor_1" />
                                  
                            <ReceiveInfo ref="receiveInfo" :formObj.async="formObj" :disabled="true"
                                :ivsltRcvModCode="ivsltRcvModCode" />
                                 
                        </div>
                              <div class="item">
                                  
                            <TransTitle title="调查对象" :hasBtn="false" ref="anchor_2" />
                                  
                            <!-- <TableListData ref="tableListData" :pageConfig="respondentTab" api="_01_TSTM03POST915" :amlAigCaseRefno="taskId" /> -->
                                  
                            <DiligenceCaseList ref="tableListData" caseType="view" :amlAigCaseRefno="taskId" />
                                 
                        </div>
                              <div class="item">
                                  
                            <TransTitle title="数据提取" :hasBtn="false" ref="anchor_3" />
                                   <DataExtraction ref="dataExtraction" :formObj.async="formObj"
                                :amlAigCaseRefno="taskId" :readOnlyFlag="readOnlyFlag" :params="params">
                            </DataExtraction>
                                 
                        </div>
                              <div class="item">
                                  
                            <TransTitle title="数据报告" ref="anchor_4" />
                                  
                            <TransSubTitle title="客户信息" ref="anchor_4_1" />
                                  
                            <TableListData ref="cusListData" :pageConfig="cusConfig" api="_01_TSTM03POST915"
                                :amlAigCaseRefno="taskId" />
                                  
                            <TransSubTitle title="收付交易汇总" ref="anchor_4_2" />
                                  
                            <TableListData ref="transData" :pageConfig="transConfig" api="_01_TSTM03POST951"
                                :amlAigCaseRefno="taskId" />
                                  
                            <TransSubTitle title="账户交易情况" ref="anchor_4_3" />
                                   <TransTabList ref="transTabList" :amlAigCaseRefno="taskId"
                                :cusData="cusData"></TransTabList>
                                 
                        </div>
                              <div class="item">
                                  
                            <TransTitle title="调查回复" :hasBtn="false" ref="anchor_5" />
                                   <FileList ref="fileList" :params="params" api="_01_TSTM03QUERY911"
                                :readOnlyFlag="readOnlyFlag"></FileList>
                                 
                        </div>
                              <div class="item">
                                  
                            <TransTitle title="处理意见" ref="anchor_7" />
                                  
                            <FeedBackInfo :formObj.async="formObj" ref="feedBackInfo" :params="params"
                                :readOnlyFlag="readOnlyFlag" />
                                  
                            <OptionInfo :formObj.async="formObj" ref="optionInfo" :params="params"
                                :readOnlyFlag="readOnlyFlag" />
                                  
                            <ProduceList ref="produceList" :params="params" />
                                 
                        </div>
                             </bfe-main>
                         <bfe-footer>
                            <span style="float: right" v-show="!readOnlyFlag">
                                 <!-- <bfe-button type="primary" @click="fileUploadSupply('0')" :loading="btnLoading">新增附件</bfe-button>
     <bfe-button type="primary" @click="fileUploadSupply('1')" :loading="btnLoading">补充反馈</bfe-button> -->
                                 <bfe-button type="primary" @click="handSave('AGREE', '')" :loading="btnLoading">{{
                                $t('stm.common.agree') }}</bfe-button>

                                </span>
                             </bfe-footer>
                        </div>

                   </bfe-container>

               <bfe-aside width="120px" class="aside">
                    <bfe-timeline style="height:100%">
                         <bfe-timeline-item :color="activeBtn === 0 ? '#0f0' : ''" :key="0"> <span
                            @click="goTo('anchor_0', 0)">调查信息</span></bfe-timeline-item>
                         <bfe-timeline-item :color="activeBtn === 1 ? '#0f0' : ''" :key="1"> <span
                            @click="goTo('anchor_1', 1)">接收情况</span></bfe-timeline-item>
                         <bfe-timeline-item :color="activeBtn === 2 ? '#0f0' : ''" :key="2"> <span
                            @click="goTo('anchor_2', 2)">调查对象</span></bfe-timeline-item>
                         <bfe-timeline-item :color="activeBtn === 3 ? '#0f0' : ''" :key="3"> <span
                            @click="goTo('anchor_3', 3)"
                            :diasbled="params.amlAigCaseSts !== '1003'">数据提取</span></bfe-timeline-item>
                         <bfe-timeline-item :color="activeBtn === 4 ? '#0f0' : ''" :key="4">
                              <span @click="goTo('anchor_4', 4)">数据报告</span>
                              <bfe-timeline style="height:100%;margin-top: 25px">
                                   <bfe-timeline-item :key="4.1"> <i class="giop-icon-arrow-right"
                                    slot="dot" /><span @click="goTo('anchor_4_1', 0)">客户信息</span></bfe-timeline-item>
                                   <bfe-timeline-item :key="4.2"> <i class="giop-icon-arrow-right"
                                    slot="dot" /><span @click="goTo('anchor_4_2', 0)">收付交易汇总</span></bfe-timeline-item>
                                   <bfe-timeline-item :key="4.3"> <i class="giop-icon-arrow-right"
                                    slot="dot" /><span @click="goTo('anchor_4_3', 0)">账户交易情况</span></bfe-timeline-item>
                                  </bfe-timeline>
                             </bfe-timeline-item>
                         <bfe-timeline-item :color="activeBtn === 5 ? '#0f0' : ''" :key="5"> <span
                            @click="goTo('anchor_5', 5)">调查回复</span></bfe-timeline-item>
                         <bfe-timeline-item :color="activeBtn === 7 ? '#0f0' : ''" :key="7"> <span
                            @click="goTo('anchor_7', 7)">处理意见</span></bfe-timeline-item>
                        </bfe-timeline>
                   </bfe-aside>
              </bfe-container>
          <FileUpload ref="fileUpload"         :dialogTableVisible.sync="dialogTableVisible"        
            :uploadModule="'uploadFile'"         :fileUpFlag="fileUpFlag"         :params="params"   
                 :isSubmit="'0'"         @getFileData="getFileData"></FileUpload>
         </div>

</template>

<script>
import BaseInfo from './components/BaseInfo'
import TransTitle from './components/TransTitle'
import ReceiveInfo from './components/ReceiveInfo'
import TableList from './components/TableList'
import OptionInfo from './components/OptionInfo'
import ProduceList from './components/ProduceList'
import TransSubTitle from './components/TransSubTitle'
import TableListData from './components/TableListData'
import { accountConfig, cusConfig, dcConfig, respondentTab, transConfig } from './config'
import apisRegister from '@/views/business/stm/api/STMAPI'
import moment from 'moment'
import DataExtraction from '@/views/business/stm/views/transAssistance/regulatoryCooperation/components/DataExtraction';
import FileList from '@/views/business/stm/views/transAssistance/regulatoryCooperation/components/FileList';
import { mapState } from 'vuex';
import TransTabList from '@/views/business/stm/views/transAssistance/regulatoryCooperation/components/TransTabList';
import FeedBackInfo from '@/views/business/stm/views/transAssistance/regulatoryCooperation/components/FeedBackInfo';
import Approval from '@/views/business/stm/views/transAssistance/regulatoryCooperation/Approval';
import FileUpload from '@/views/business/stm/views/transAssistance/regulatoryCooperation/components/FileUpload';
import _ from 'lodash';
import DiligenceCaseList from './components/DiligenceCaseList'

export default {
    name: 'FeedbackCase',
    components: {
        TransTabList,
        FileList,
        DataExtraction,
        BaseInfo,
        TransTitle,
        ReceiveInfo,
        TableList,
        OptionInfo,
        ProduceList,
        TransSubTitle,
        TableListData,
        FeedBackInfo,
        Approval,
        FileUpload,
        DiligenceCaseList
    },
    data() {
        return {
            btnLoading: false,
            loading: false,
            title: '',
            formObj: {
                cusList: [],
                rcvTime: '',
            },
            cusConfig,
            transConfig,
            accountConfig,
            dcConfig,
            type: 'recheck',
            conditions: [
                { paramTp: 'stm_surveyScope', paramCacheFlag: '0' },
                { paramTp: 'stm_ivsltRcvMod', paramCacheFlag: '0' }
            ],
            // taskId: '',
            cusno: '',

            cusDataLength: 0,
            respondentTab,

            taskId: '',
            params: {},
            cusData: [],
            readOnlyFlag: false,
            dialogTableVisible: false,
            activeBtn: 0,
            codeSelectObj: {},
            fileUpFlag: '1',
            changeStepTips: null
        }
    },
    computed: {
        language() {
            return this.$store.state.base.language
        },
        ...mapState({
            state: (state) => {
                return state.stm;
            },
            activeFlag: (state) => {
                return state.base.activeFlag
            },
            userInfo: state => state?.base?.userInfo,
            surveyScopeCode: (state) => {
                return _.filter(
                    state.stm.codeSelectObj['zh_CN'],
                    (it) => it.paramTp === 'stm_surveyScope'
                )
            },
            ivsltRcvModCode: (state) => {
                return _.filter(
                    state.stm.codeSelectObj['zh_CN'],
                    (it) => it.paramTp === 'stm_ivsltRcvMod'
                )
            },
        }),
    },
    created() {
        const { record } = this.$route.params
        if (record) {
            this.params = { ...record }
            this.taskId = this.params.amlAigCaseRefno;
            this.readOnlyFlag = this.params.type === 'view';
            // this.initData()
        }
        // const this_ = this
        // const unwatch = this_.$watch('$route', function (n, o) {
        //  if (this.$route.params.amlAigCaseRefno) {
        //   this.taskId = this.$route.params.amlAigCaseRefno;
        //  }
        // }, { immediate: true, deep: true })
        // unwatch()
    },
    // watch: {
    //  '$route': {
    //   handler: function (to, from) {
    //    if (to.name?.indexOf(this.state.regAigCasePathPrefix) > -1) {
    //     this.params = this.state.caseList[this.$route.name.replace(this.state.regAigCasePathPrefix, '')]
    //     this.taskId = this.params.amlAigCaseRefno;
    //     this.readOnlyFlag = this.params.type === 'view';
    //    }
    //   },
    //   deep: true,
    //   immediate: true,
    //  },
    // },
    mounted() {
        this.$store.dispatch('stm/getCodeSelect', this.conditions)
        window.addEventListener('scroll', this.handleScroll, true)
        // console.log(1,'======1')
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll, true)
    },
    activated() {
        const { changeStepTips, record } = this.$route.params
        if (changeStepTips) {
            this.changeStepTips = changeStepTips
        }
        if (record) {
            this.params = { ...record }
            this.taskId = this.params.amlAigCaseRefno;
            this.readOnlyFlag = this.params.type === 'view';
            this.initData()
        }
    },
    methods: {
        initData(data) {
            this.getDetails()
            this.getCusno()
            this.$nextTick(() => {
                this.$refs.tableListData.getPageData()
                if (this.params.amlAigCaseSts !== '1002' && this.params.amlAigCaseSts !== '1001') {
                    this.$refs.cusListData.getPageData()
                    if (this.params.extractStatus === '3') {
                        this.$refs.transData.getPageData()
                    }
                }
            })
            //删除上次没有提交的文件
            this.delFile()
        },

        handSave(str, flag) {
            // 必输校验
            const validateArr = ['optionInfo']
            const flagArr = validateArr.map(val => this.$refs[val].validateForm())
            if (flagArr.includes(false)) {
                return false
            }

            const params = {
                payload: {
                    ...this.formObj,
                    scopeInvest: this.formObj.scopeInvest ? this.formObj.scopeInvest.split(',') : [],
                    // rcvTime: moment(this.formObj.rcvTime).format('YYYY-MM-DD HH:mm:ss'),
                    rcvDt: moment(this.formObj.rcvDt).format('YYYY-MM-DD'),
                    // replComptCtperTime: moment(this.formObj.rcvTime).format('YYYY-MM-DD HH:mm:ss'),
                    task: {},
                    retractFlag: flag, //流程退回-撤回标识
                    changeStepTips: this.changeStepTips
                },
                flowParam: {
                    'taskId': this.taskId,
                    'taskTp': 'PBOC_REG_AIG_TP',
                    'command': str,
                    'backMode': str === 'REFUSE' ? 'BY_STEP_AND_RELEASE' : 'END',
                    'backSeq': '1',
                    'createMode': 'INIT',
                    'turnMode': 'USER',
                    'remark': '反洗钱协查案案例流程'
                },
                optTp: str === 'AGREE' ? '同意' : (str === 'REFUSE' ? '退回' : '撤回')
            }

            let api = ''
            //6.已反馈
            api = '_01_TSTM03POST960'
            if (this.formObj.isNew === '1') {
                params.payload.task.append = 'HANDLE'
            } else {
                params.payload.task.append = 'COMPLETE'
            }

            this.btnLoading = true
            this.$p2svr(apisRegister[api], '', params)
                .then((res) => {
                    if (res.optMsgInfo && res.optMsgInfo.optStatus === 'success') {
                        //案例处理完成时，关闭处理tab页并刷新列表页数据
                        this.pageToList()
                    }
                })
                .finally(() => {
                    this.btnLoading = false
                });
        },
        pageToList() {
            this.$bus.$emit('getRegList')
            this.$bus.$emit('handleTabRemove', this.activeFlag)
            this.$router.push({ name: 'regulatoryCooperationList' })
            if (window.__POWERED_BY_QIANKUN__) {
                this.$p2props.P2Router.routerForwarding({
                    menuRefNo: '0001.A129.0390',
                    query: {
                        type: 'toDoListJump'
                    },
                    code: 1,
                    needWarning: false
                })
            }
        },
        getDetails() {
            const params = {
                payload: {
                    amlAigCaseRefno: this.taskId
                },
            }
            this.$p2svr(apisRegister['_01_TSTM03POST936'], '', params)
                .then((res) => {
                    this.formObj = {
                        ...res.payload,
                        mnpltNote: '',
                        isNew: '',
                        rspltRspnMod: res.payload?.rspltRspnMod || '0',
                        // scopeInvest: res.payload.scopeInvest ? res.payload.scopeInvest.split(',') : []
                    }
                })
        },
        getCusno(data) {
            const params = {
                payload: {
                    amlAigCaseRefno: this.taskId
                },
            }
            this.$p2svr(apisRegister['_01_TSTM03POST953'], '', params)
                .then((res) => {
                    this.cusData = res.payload
                    this.cusDataLength = res.payload.length
                })
                .finally(() => {
                });
        },
        delFile(data) {
            const params = {
                payload: {
                    amlAigCaseRefno: this.taskId
                },
            }
            this.$p2svr(apisRegister['_01_TSTM03GET939'], '', params)
                .then((res) => {
                    if (res.respStatus === '00') {
                        this.getFileData()
                    }
                }).catch(() => {

                })
        },
        // 补充反馈
        fileUploadSupply(val) {
            // this.fileUpFlag = val === '0' ? '2' : '3'
            this.fileUpFlag = '1'
            this.formObj.isNew = val
            this.dialogTableVisible = true
        },
        getFileData() {
            this.$refs.fileList.getFileData()
        },

        setBtnLoading(val) {
            this.btnLoading = val
        },
        //
        goTo(ref, index) {
            this.activeBtn = index
            let top = this.$refs[ref]?.$el.offsetTop - 80
            this.$refs['scrollBox'].scrollTo({ top: top })
        },
        handleScroll(e) {
            let scrollTop = e.target.scrollTop
            let anchor0 = this.$refs['anchor_0']?.$el.offsetTop
            let anchor1 = this.$refs['anchor_1']?.$el.offsetTop
            let anchor2 = this.$refs['anchor_2']?.$el.offsetTop
            let anchor3 = this.$refs['anchor_3']?.$el.offsetTop
            let anchor4 = this.$refs['anchor_4']?.$el.offsetTop
            let anchor5 = this.$refs['anchor_5']?.$el.offsetTop
            let anchor7 = this.$refs['anchor_7']?.$el.offsetTop
            const cheight = document.querySelector('#anchor5')?.clientHeight || 0
            // if (scrollTop === 0 || scrollTop < anchor1-40) {
            //  this.activeBtn = 0
            // } else if (scrollTop > anchor1-40 && scrollTop < anchor2-40) {
            //  this.activeBtn = 1
            // } else if (scrollTop > anchor2-40 && scrollTop < anchor3-40) {
            //  this.activeBtn = 2
            // } else if (scrollTop > anchor3-40 && scrollTop < anchor4-40) {
            //  this.activeBtn = 3
            // } else if (scrollTop > anchor4-40 && scrollTop < anchor5-40) {
            //  this.activeBtn = 4
            // } else if (scrollTop > anchor5-40 && scrollTop < anchor7-40) {
            //  this.activeBtn = 5
            // } else if (scrollTop > anchor7-40) {
            //  this.activeBtn = 7
            // }
            const top = 100
            if (scrollTop > anchor5 + cheight) {
                this.activeBtn = 7
            } else if (scrollTop > anchor5 - top) {
                this.activeBtn = 5
            } else if (scrollTop > anchor4 - top) {
                this.activeBtn = 4
            } else if (scrollTop > anchor3 - top) {
                this.activeBtn = 3
            } else if (scrollTop > anchor2 - top) {
                this.activeBtn = 2
            } else if (scrollTop > anchor1 - top) {
                this.activeBtn = 1
            } else if (scrollTop > anchor0 - top) {
                this.activeBtn = 0
            }
        },
    }
}
</script>

<style lang="less" scoped>
@import '../../../style/stm.less';

/deep/.giop-dialog--small {
    width: 70%;
    margin-left: -35%;
    height: 70vh;

    .giop-dialog__body {
        height: calc(70vh - 99px);
    }
}

.transTitle {
    margin-top: 0 !important;
}

.item {
    width: 100%;
    margin-top: 10px;
}

.bfeContainer {
    height: calc(100vh - 205px) !important;
    position: relative;
}

.aside {
    //border: 1px solid rgba(0,0,0,0.12);
    margin-top: 20px;
    margin-left: 20px;
}

.scrollBox::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.scrollBox {
    height: 100vh;
    overflow-y: auto;
}

/deep/.giop-timeline__item {
    cursor: pointer;
}

/deep/.giop-timeline__item:last-of-type {
    padding-bottom: 0;
}

/deep/.giop-timeline__item:last-of-type .giop-timeline__item__content {
    padding-bottom: 0;
}

/deep/.giop-timeline__item .giop-timeline__item__content span {
    display: block;
    width: 100%;
}
</style>
